<!doctype html>
<!--
  @license
  Copyright 2021 Google LLC
  SPDX-License-Identifier: BSD-3-Clause
-->
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
    />
    <title>Tabs Animation</title>
  </head>
  <body>
    <style>
      html,
      body {
        margin: 0;
        font-family: sans-serif;
        height: 100vh;
        width: 100vw;
      }

      my-element {
        flex: 1;
      }
    </style>
    <my-element>
      <span>User 1</span>
      <span>User 2</span>
      <span>User 3</span>
    </my-element>
    <script type="module">
      import {LitElement, css} from 'lit';
      import {html, unsafeStatic} from 'lit/static-html.js';
      import {animate} from '../development/animate.js';
      import {position} from '../development/position.js';

      class MyElement extends LitElement {
        static styles = [
          css`
            :host {
              display: flex;
              height: 100%;
              width: 100%;
              align-items: center;
              position: relative;
              overflow: hidden;
              color: #040424;
              cursor: pointer;
            }

            ul {
              list-style: none;
              padding: 0;
              margin: 0;
              display: flex;
              position: relative;
              width: 100%;
            }

            li,
            ::slotted(*) {
              text-align: center;
              flex: 1;
              background: darkgray;
              padding: 10px;
            }

            .underline {
              display: inline-block;
              height: 3px;
              background: red;
              position: absolute;
              bottom: 0px;
            }
          `,
        ];

        _selectedMarker = `selected`;

        render() {
          const keyframeOptions = {
            duration: 1000,
            easing: 'ease-in-out',
            fill: 'both',
          };
          return html`
            <ul class="tabs" @click=${this.tabClick}>
              <li>One</li>
              <li ${unsafeStatic(this._selectedMarker)}>Two</li>
              <li>Three</li>
              <slot></slot>
              <div
                class="underline"
                ${position(() => this._activeTab, ['left', 'width'])}
                ${animate({...keyframeOptions, guard: () => this._activeTab})}
              ></div>
            </ul>
          `;
        }

        tabClick(e) {
          this._activeTab?.removeAttribute(this._selectedMarker);
          e.target.setAttribute(this._selectedMarker, '');
          this.requestUpdate();
        }

        get _tabs() {
          return this.renderRoot?.querySelector(`.tabs`);
        }

        get _activeTab() {
          return (
            this.renderRoot?.querySelector(`.tabs [${this._selectedMarker}]`) ??
            this.querySelector(`[${this._selectedMarker}]`)
          );
        }
      }

      customElements.define('my-element', MyElement);
    </script>
  </body>
</html>
